<template>
  <swiper
    class="swiper-style"
    previous-margin="68rpx"
    next-margin="68rpx"
    :circular="false"
    :indicator-dots="!!(list?.length && list.length > 1)"
    indicator-active-color="#2878FF"
    @change="handleSwiperChange"
  >
    <template v-for="(item, index) in list" :key="index">
      <swiper-item>
        <TImage :src="item" width="520rpx" height="100%" mode="aspectFit" />
      </swiper-item>
    </template>
  </swiper>
  <view class="disFlxAC disFlxJC mt-24">
    <TButton
      text="保存海报"
      type="primary"
      :icon="'\ue6b3'"
      :custom-style="{
        display: 'inline-block',
      }"
      custom-class="h-32 linh-32 br-16 px-12"
      @click="handleSavePoster"
    />
    <TButton
      text="立即分享"
      type="primary"
      :icon="'\ue6b9'"
      :custom-style="{
        display: 'inline-block',
        marginLeft: '32rpx',
      }"
      custom-class="h-32 linh-32 br-16 px-12"
      @click="handleSharePoster"
    />
  </view>
</template>

<script setup lang="ts">
  import { ref, type PropType } from 'vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import TImage from '@/components/TImage/index.vue';
  import { Toast } from '@/utils';

  const props = defineProps({
    list: {
      type: Array as PropType<string[]>,
      default: () => [],
    },
  });

  const current = ref(0);
  function handleSwiperChange(e: { detail: { current: number } }) {
    current.value = e.detail.current;
  }

  function handleSavePoster() {
    uni.saveImageToPhotosAlbum({
      filePath: props.list[current.value],
      success: () => {
        Toast('海报已保存至相册');
      },
    });
  }

  function handleSharePoster() {
    uni.showShareImageMenu({
      path: props.list[current.value],
    });
  }
</script>

<style lang="scss" scoped>
  .swiper-style {
    height: 700rpx;
    margin-top: -100rpx;
  }
</style>
